<script setup>
import { ref } from 'vue';
import { RouterLink, RouterView } from 'vue-router'
import LeftMenu from './components/LeftMenu.vue'

const collapsed = ref(false);

</script>

<template>
      <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible  class="sider-card">
        <div class="logo" />
        <LeftMenu></LeftMenu>
      </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
      </a-layout-header>
      <main class="main-content">
        <RouterView />
      </main>
    </a-layout>
</template>

<style lang="less" scoped>
#app{
  margin: 0px;
  padding: 0px;
}

header{
  background-color: #001529;
}
.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}
.sider-card{
  width: 12rem ;
  background-color: #000C17;
}
.main-content {
  height: calc(100vh - 64px); /* 减去 header 的高度，假设 header 高度为 64px */
  overflow-y: auto; /* 当内容溢出时显示滚动条 */
}

</style>
